<template>
  <div>
    <div>

      <div class="main">
        <eagle-input
          label="事故编号"
          v-model="form.IncidentNumber"
          name="IncidentNumber"
          readonly
        >
        </eagle-input>
        <eagle-input
          label="事故名称"
          v-model="form.AccidentName"
          name="AccidentName"
          type="textarea"
          rows="1"
          autosize
          readonly
        >
        </eagle-input>
        <!-- <van-field label="所在位置" v-model="form.AccidentPlace" name="AccidentPlace" type="textarea" rows="1" autosize readonly></van-field>
                <van-field label="事故对象" v-model="form.AccidentObject" type="textarea" rows="2" v-if="form.SystemAccidentObject == 'A' || form.SystemAccidentObject == null" name="AccidentObject" readonly></van-field>
                <van-field label="后果事件" v-model="form.Consequence" type="textarea" rows="3" name="Consequence" readonly></van-field> -->
        <eagle-input
          label="事故发生部门"
          v-model="form.AccidentDepartmentName"
          name="AccidentDepartmentName"
          readonly
        ></eagle-input>
        <eagle-input
          label="事故发生日期"
          :value="form.AccidentDate|formatDateTime()"
          name="AccidentDate"
          readonly
        >
        </eagle-input>
        <eagle-input
          label="事故简介"
          v-model="form.Remarks"
          type="textarea"
          rows="1"
          autosize
          readonly
        />
        <eagle-radio-group
          name="ProcessClassification"
          label="工艺分类"
          v-model="form.ProcessClassification"
          :dataSource="form.ProcessClassificationList"
          direction="horizontal"
          readonly
        >
        </eagle-radio-group>
        <eagle-radio-group
          name="AttidentClassification"
          label="事故分类"
          :show="form.ProcessClassification == 'A'"
          v-model="form.AttidentClassification"
          :dataSource="form.AccidentProcessList"
          direction="horizontal"
          readonly
        >
        </eagle-radio-group>
        <eagle-radio-group
          name="AttidentClassification"
          label="事故分类"
          :show="form.ProcessClassification == 'B'"
          v-model="form.AttidentClassification"
          :dataSource="form.AccidentFreeProcessList"
          direction="horizontal"
          readonly
        >
        </eagle-radio-group>
        <eagle-checkgroup
          v-show="isShow(1)"
          v-model="harmArr"
          :dataSource="form.HarmList"
          label="伤害/职业病"
          :option="{label:'Name',value:'ID'}"
          direction="horizontal"
          class="input_text"
          readonly
        ></eagle-checkgroup>
        <eagle-input
          v-if="isShow(2)"
          label="火灾爆炸涉及范围"
          v-model="form.InvolveScope"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-input
          v-if="isShow(3)"
          label="环境污染范围"
          v-model="form.PolluteScope"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-input
          v-if="isShow(4)"
          label="泄露物质"
          v-model="form.RevealMatter"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-input
          v-if="isShow(4)"
          label="泄露量"
          v-model="form.Spillage"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-input
          v-if="isShow(5)"
          label="生产异常影响范围"
          v-model="form.SphereInfluence"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-input
          v-if="isShow(7)"
          label="直接财产损失"
          v-model="form.DirectPropertyLoss"
          type="textarea"
          rows="1"
          autosize
          readonly
        ></eagle-input>
        <eagle-radio-group
          name="AttidentgRading"
          label="事故分级"
          :show="form.ProcessClassification == 'B' || form.ProcessClassification=='A'"
          v-model="form.AttidentgRading"
          :dataSource="form.AttidentgRadingList"
          direction="horizontal"
          readonly
        >
        </eagle-radio-group>
        <eagle-radio-group
          name="PotentialRisk"
          label="潜在风险"
          v-model="form.PotentialRisk"
          :dataSource="form.PotentialRiskList"
          direction="horizontal"
          readonly
        >
        </eagle-radio-group>
        <eagle-input
          label="事故造成的影响"
          v-model="form.AccidentConsequence"
          type="textarea"
          rows="2"
          autosize
          readonly
        />
        <div class="report-block">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              name="1"
              class="cell-time-line"
            >
              <template #value>
                <van-tag
                  type="primary"
                  size="large"
                  mark
                >时间事件链</van-tag>
              </template>
              <van-list style="margin: 10px">
                <eagle-cell
                  style="margin-top: 10px"
                  class="cell-item"
                  v-for="(item, index) in form.Details"
                  :key="index"
                >
                  <eagle-row>
                    <eagle-col span="24">
                      日期/时间：{{ item.AccidentDate1 | formatDateTime }}
                    </eagle-col>
                  </eagle-row>
                  <eagle-row
                    gutter="20"
                    class="dep_sort"
                  >
                    <eagle-col span="24">
                      事件描述：{{ item.IncidentDescription }}
                    </eagle-col>
                  </eagle-row>
                  <eagle-row
                    gutter="20"
                    class="dep_sort"
                  >
                    <eagle-col span="24">
                      备注/证据说明：{{ item.EvidenceDescription }}
                    </eagle-col>
                  </eagle-row>
                </eagle-cell>
              </van-list>
            </van-collapse-item>
          </van-collapse>

        </div>

        <div class="report-block">
          <div
            slot="title"
            style="padding-top: 5px;"
          >
            <van-tag
              type="primary"
              size="large"
              mark
            >原因分析</van-tag>
          </div>
          <div
            class="det_tab"
            style="padding: 0"
          >
            <div class="det_tab_item">
              <eagle-input
                label="分析过程"
                v-model="form.ReasonAnalysis"
                type="textarea"
                rows="2"
                autosize
                readonly
              >
              </eagle-input>
              <van-collapse v-model="activeNamesFactor">
                <van-collapse-item name="1">
                  <div slot="title">
                    <div>
                      <span class="title mr-30">关键因素</span>
                    </div>
                  </div>

                  <van-list style="margin: 10px">
                    <eagle-cell
                      style="margin-top: 10px"
                      class="cell-item"
                      v-for="(item, index) in form.Details2"
                      :key="index"
                    >
                      <eagle-row>
                        <eagle-col span="20">
                          {{ item.KeyFactor }}
                        </eagle-col>

                      </eagle-row>

                    </eagle-cell>
                  </van-list>
                </van-collapse-item>
              </van-collapse>
              <eagle-input
                label="直接原因"
                v-model="form.ImmediateCause"
                type="textarea"
                rows="2"
                autosize
                readonly
              >
              </eagle-input>
              <eagle-input
                label="根本原因"
                v-model="form.PrimaryCause"
                type="textarea"
                rows="2"
                autosize
                readonly
              >
              </eagle-input>
            </div>
          </div>
        </div>

        <div class="report-block">
          <div
            class="det_tab"
            style="padding: 0"
          >
            <van-collapse v-model="activeNamesCorrectiveAction">
              <van-collapse-item
                name="1"
                class="cell-time-line"
              >
                <template slot="value">
                  <van-tag
                    type="primary"
                    size="large"
                    mark
                  >整改与预防措施</van-tag>
                </template>
                <van-list style="margin: 10px">
                  <eagle-cell
                    style="margin-top: 10px"
                    class="cell-item"
                    v-for="(item, index) in form.Details3"
                    :key="index"
                  >
                    <eagle-row>
                      <eagle-col span="24">
                        整改行动：{{ item.CorrectiveAction }}
                      </eagle-col>
                    </eagle-row>
                    <eagle-row>
                      <eagle-col span="24">
                        责任人：{{ item.PersonLiable }}
                      </eagle-col>
                    </eagle-row>
                    <eagle-row>
                      <eagle-col span="24">
                        完成日期：{{ item.FinishDate | formatDate }}
                      </eagle-col>
                    </eagle-row>
                  </eagle-cell>
                </van-list>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>

        <div class="report-block">
          <van-collapse v-model="activeNamesInvestigateGroup">
            <van-collapse-item
              name="1"
              class="cell-time-line"
            >
              <template #value>
                <van-tag
                  type="primary"
                  size="large"
                  mark
                >事故调查小组</van-tag>
              </template>
              <van-list style="margin: 10px">
                <eagle-cell
                  style="margin-top: 10px"
                  class="cell-item"
                  v-for="(item, index) in form.Details4"
                  :key="index"
                >
                  <eagle-row>
                    <eagle-col span="24"> 角色：{{ getRole(item.Role) }} </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24"> 名称：{{ item.Name }} </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24"> 职务：{{ item.AccidentDuty }} </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24"> 电话：{{ item.Phone }} </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24"> 邮件：{{ item.Email }} </eagle-col>
                  </eagle-row>
                </eagle-cell>
              </van-list>
            </van-collapse-item>
          </van-collapse>
        </div>
        <div class="report-block">
          <van-field
            class="input_text"
            name="checkboxGroup"
            label="需要加强的HSE管理要素
"
          >
            <template #input>
              <van-checkbox-group
                v-model="HSEManagementList"
                direction="horizontal"
                disabled
                style="padding-left: 8px;"
              >
                <van-checkbox
                  :name="item.ID"
                  shape="square"
                  v-for="(item, index) in form.HSEManagementList"
                  :key="index"
                >{{ item.Name }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <eagle-input
            label="经验教训
"
            v-model="form.InvestigationTeam"
            type="textarea"
            rows="2"
            autosize
            readonly
          >
          </eagle-input>
          <van-list style="margin: 10px">
            <eagle-cell
              style="margin-top: 10px;padding-left: 0px;"
              class="cell-item"
              v-for="(item, index) in form.AuditData"
              :key="index"
            >
              <eagle-row>
                <eagle-col
                  span="8"
                  style="padding-left: 0px;text-align: left;color:#646566"
                >
                  {{item.LevelName}}
                </eagle-col>
                <eagle-col
                  span="16"
                  style="padding-left: 10px;"
                >
                  {{item.OperateContent}}
                </eagle-col>
              </eagle-row>
            </eagle-cell>
          </van-list>
          <eagle-file-view
            @CallBack="_fileUploadCb"
            :attachs="form.Attachs"
            :allowEdit="false"
            :labelName="'附件'"
          />

        </div>

      </div>
    </div>

  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {},
      harmArr: [],
      activeNames: ["1"],
      correctiveAction: {
        CorrectiveAction: "",
        PersonLiable: "",
        FinishDate: "",
        index: -1,
      },
      keyFactor: {
        KeyFactor: "",
        index: -1,
      },
      show: false,
      activeNamesFactor: ["1"],
      activeNamesCorrectiveAction: ["1"],
      activeNamesInvestigateGroup: ["1"],
      HSEManagementList: [],
    };
  },
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },
  created() {
    let id = this.$route.query.id;
    this.GetView1(id);
  },
  methods: {
    GetView1(id) {
      var _this = this;
      _this.$axios
        .get("/WhInvestigationReport/GetView", { params: { id: id } })
        .then((res) => {
          _this.form = res.data;
          if (res.data.Harm != null) {
            _this.harmArr = res.data.Harm.split(",");
          }

          _this.edit = true;
          if (res.data.HSEManagement != null) {
            _this.HSEManagementList = res.data.HSEManagement.split(",");
          }
        });
    },
    isShow(value) {
      if (
        this.form.AttidentClassification &&
        this.form.AttidentClassification.indexOf(value) > -1 &&
        (value != "4" || this.form.ProcessClassification == "A") &&
        (value != "5" || this.form.ProcessClassification == "A") &&
        (value != "7" || this.form.ProcessClassification == "B")
      ) {
        return true;
      }
      return false;
    },
    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },
    getRole(val) {
      if (val == "A") {
        return "组长";
      } else {
        return "组员";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.valueclass {
  color: rgb(0, 195, 224);
  margin-right: 0.3rem;
}
.report-block {
  background-color: #fff;
  margin-top: 0.5rem;
}
/deep/ .cell-time-line {
  padding-top: 3px;
  .van-cell {
    padding-left: 0px;
  }
}
.valueclass {
  margin-right: 0.3rem;
  float: right;
}

.time-link-dialog {
  height: 9rem;
}

.factor-dialog {
  height: 4.5rem;
}

.corrective-action-dialog {
  height: 8rem;
}
/deep/.van-field__error-message {
  color: unset;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 30%;
    height: 30px;
    font-size: 12px;
  }
  .submit-only {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
  .submit-two {
    width: 48%;
    height: 30px;
    font-size: 12px;
  }
}

.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

/deep/ .van-collapse-item__content {
  padding: 0rem;
}

.report-block {
  background-color: #fff;
  margin-top: 0.5rem;
}
/deep/ .valueclass[data-v-f75fe2f8] {
  margin-right: 0.3rem;
  float: right;
  height: 23px;
  width: 50px;
}

/deep/ .cell-time-line {
  padding-top: 3px;
  .van-cell {
    padding-left: 0px;
  }
}
</style>